<template>
  <div class="summary">
    <div class="header">{{text+'运势总结'}}</div>
    <div class="content">{{content||'加载中...'}}</div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
  name: 'consmain',
  props: {
    content: String,
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const text = ref('')
    const setTitle = () => {
      if (props.title === '') {
        text.value = props.content.substr(0, 2)
      } else {
        text.value = props.title
      }
    }
    onMounted(() => {
      setTitle()
    })
    return {
      text
    }
  }
}
</script>
<style lang="less" scoped>
.summary {
  margin: 10px 14px 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.header {
  text-align: center;
  font-size: 16px;
  height: 36px;
  line-height: 36px;
  background-color: #d32f89;
  color: #fff;
}
.content {
  padding: 8px 20px 10px 10px;
  text-indent: 2em;
  font-size: 14px;
}
</style>
